<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>flow - javascript ui</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="icon" href="../favicon.ico" />
	<link rel="stylesheet" href="css/page.css" type="text/css"/>
	<link rel="stylesheet" href="../css/flow.css" type="text/css"/>
	
	<link rel="stylesheet" href="../fonts/open-sans/open-sans.css" type="text/css"/>
	<link rel="stylesheet" href="../fonts/tabler-icons/tabler-icons.css" type="text/css"/>

	<link rel="stylesheet" type="text/css" href="vs/editor/editor.main.css">
	<!-- -->
</head>
<style>
/*
flow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 50%;
}
*/
</style>
<body>
	<script src="vs/loader.js"></script>
	<flow></flow>
	<script type="module">

		import * as Flow from '../jsm/Flow.js';

		const node = new Flow.Node();
		node.setWidth( 500 );
		node.setPosition( 100, 100 );
		let element;
		//node.add( new Flow.TitleElement( 'SEA3D Loader' ).setColor( 'purple' ).setOutput( 1 ).setOutputColor( 'fuchsia' ) );
		node.add( new Flow.TitleElement( 'Script' ).setOutput( 1 ).setOutputColor( 'orange' ) );
		node.add( element = new Flow.Element() );	
		node.setResizable( true );

		element.setHeight( 500 );
		//element.dom.style.width = '300px';

		const editorDOM = document.createElement( 'div' );
		editorDOM.style.width = '100%';
		editorDOM.style.height = '100%';

		element.dom.classList.add( 'no-zoom' );
		element.dom.appendChild( editorDOM );
		
		const canvas = new Flow.Canvas();
		canvas.setSize( window.innerWidth, window.innerHeight );
		canvas.add( node );

		window.onresize = () => canvas.setSize( window.innerWidth, window.innerHeight );

		( () => {

			require.config({ paths: { 'vs': ' vs' }});

			require(['vs/editor/editor.main'], function() {
				const editor = monaco.editor.create(editorDOM, {
					value: [
						'function x() {',
						'\tconsole.log("Hello world!");',
						'}'
					].join('\n'),
					language: 'javascript',
					theme: 'vs-dark',
					automaticLayout: true
				});
			});

		} )();

		const dom = document.querySelector( 'flow' );
		
		dom.appendChild( canvas.dom );

	</script>
</body>
</html>